<template>
  <div class="basicMessage">
    <el-form class="form" :model="basicForm">
      <el-form-item class="formItem move" label="试卷标题 : ">
        {{basicForm.examTitle}}
      </el-form-item>
      <el-form-item class="formItem move" label="考试单位 : ">
        {{basicForm.dept}}
      </el-form-item>
      <el-form-item class="formItem move" label="考试类型 : ">
        {{basicForm.examTypeContent}}
      </el-form-item>
      <el-form-item class="formItem move" label="考试时间 : ">
        {{basicForm.beginTime }} - {{ basicForm.endTime}}
      </el-form-item>
      <el-form-item class="formItem timelimitMove" label="考试限时(分) : ">
        {{basicForm.examTimeLimit/60}}
      </el-form-item>
      <el-form-item class="formItem move" label="试卷总分 : ">
        {{basicForm.totalScore}}
      </el-form-item>
      <el-form-item class="formItem limitMove" label="答题次数限制 : ">
        {{basicForm.examNumLimit}}
      </el-form-item>
      <el-form-item class="formItem priceMove" label="考试费用(元) : ">
        {{fee.decimal}}
        <span v-if="fee.feeType === 1">
          <span class="warningFee">提示：
            <span class="feeTime" v-for="(item,index) in fee.deptPayTime" :key="index">考生在 <span class="warning">{{item.beginTime}}</span> 到 <span class="warning">{{item.endTime}}</span> 期间免费</span>
          </span>
        </span>
      </el-form-item>
      <el-form-item class="formItem priceTypeMove" label="费用类型 : ">
        {{fee.feeTypeContend}}
      </el-form-item>
      <el-form-item class="formItem move" label="考试介绍 : ">
        <div class="ql-editor content-detail" v-html="basicForm.examIntro"></div>
      </el-form-item>
      <!-- <el-form-item class="btns">
        <el-button type="primary" class="button" @click="edit()">编辑</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
import bus from '@/utils/bus.js'
export default {
  name: 'BasicMessage',
  data(){
    return {
      beginTime: '',
      endTime: '',
      fee: null,
      basicForm: {},
      detail: false
    }
  },
  props: {
    basicFormP: {
      type: Object
    },
    isEditToDetail: {
      type: Boolean,
      default: false
    }
  },
  created() {
    if (this.$route.query) {
      this.detail = this.$route.query.detail
      this.fee = JSON.parse(this.$route.query.fee)
      this.filter();


      this.basicForm = JSON.parse(this.$route.query.basicForm)
      this.basicForm.beginTime = moment.unix(this.basicForm.beginTime/1000).format("YYYY-MM-DD HH:mm:ss")
      this.basicForm.endTime = moment.unix(this.basicForm.endTime/1000).format("YYYY-MM-DD HH:mm:ss")

      console.log(this.basicForm,'this.basicForm')
    }
  },
  mounted(){
    if(this.isEditToDetail===true){
      this.basicForm = this.basicFormP
      this.basicForm.beginTime = moment.unix(this.basicForm.beginTime/1000).format("YYYY-MM-DD HH:mm:ss")
      this.basicForm.endTime = moment.unix(this.basicForm.endTime/1000).format("YYYY-MM-DD HH:mm:ss")
      this.filter();
    }
    
  },
  methods: {
    // fee里面的时间戳转换
    filter(){
      if(this.fee.deptPayTime!==null){
        this.fee.deptPayTime.map(res=>{
          res.beginTime = moment.unix(res.beginTime/1000).format("YYYY-MM-DD HH:mm:ss")
          res.endTime = moment.unix(res.endTime/1000).format("YYYY-MM-DD HH:mm:ss")
        })
      }
      console.log(this.fee,'fee详情')
    }
  }
};
</script>

<style scoped>
  .basicMessage{
    margin: 10px 0 40px 20px;
  }
  .formItem{
    margin-bottom: 1.25rem;
  }
  .move{
    padding-left: 2em;
  }
  .limitMove{
    padding-left: 4px
  }
  .priceMove{
    padding-left: 10px;
  }
  .timelimitMove{
    padding-left: 9px;
  }
  .priceTypeMove{
    padding-left: 32px;
  }
  .btns{
    padding-left: 110px;
    margin: 20px 0;
  }
  .warning{
    color: red;
  }
  .content-detail{
    position: relative;
    top: -4px;
    right: 14px;
    width: 80%;
  }
  .warningFee{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    position: relative;
    left: 98px;
  }
  .feeTime{
    flex: 100%;
  }
</style>